<template>
	<div>
		<login v-if='this.login_show'></login>
		<nav-header></nav-header>
		<nav-brids></nav-brids>
		<div class="detail-box">
			<h2>{{detail_name}}</h2>
			<img :src="this.detail_img" />
			<p>{{detail_pric}}元</p>
		</div>
		
		
		<nav-footer></nav-footer>
		
	</div>
</template>

<script>
	import Login from '../common/Login'
	import axios from 'axios'
	import NavHeader from '../common/NavHeader'
	import NavBrids from '../common/NavBrids'
	import NavFooter from '../common/NavFooter'
	export default {
		name: 'common-detail',
		components: {
			Login,
			NavHeader,
			NavBrids,
			NavFooter
		},
		data () {
			return {
				login_show: false,
				detail_name: '',
				detail_img: '',
				detail_pric: ''
			}
		},
		methods: {
			getDetailData () {
				axios({
					method: 'get',
					url: '/goods?module=details&id=' + this.$route.params.id 
				})
				.then( res=> {
					
					res = res.data
					if(res.status == 0){
						const data = res.data
						this.detail_name = data[0].product_name
						this.detail_img = data[0].product_img
						this.detail_pric = data[0].product_price
						
					}
				})
				.catch( err=> {
					console.log(err)
				})
			}
		},
		mounted () {
			this.getDetailData()
		}
	}
</script>

<style lang="stylus" scoped>
	.detail-box
		width:1200px
		height:600px
		margin:20px auto
		text-align:center
		padding-bottom:20px
	.detail-box h2
		font-size:30px
		margin:0 0 10px 0
	.detail-box p
		font-size:30px
		margin:20px 0 10px 0
</style>
